<template>

  <div>
    <Header></Header>
    <div>
      <ul>
        <li
          class="g1"
          id="g_1"
        >
          <a href="#a1">
            <el-tooltip
              class="item"
              effect="light"
              content="游客服务"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter1"
                  class="side side1"
                  @mouseover="changeIndex1"
                  @mouseout="changeIndexBack1"
                >
                <img
                  src='./bwg_img/pic7.png'
                  class="side "
                  v-show="side1_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g2"
          id="g_2"
        >
          <a href="#a2">
            <el-tooltip
              class="item"
              effect="light"
              content="馆藏业务"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter2"
                  class="side side2"
                  @mouseover="changeIndex2"
                  @mouseout="changeIndexBack2"
                >
                <img
                  src="./bwg_img/pic11.png"
                  class="side "
                  v-show="side2_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g3"
          id="g_3"
        >
          <a href="#a3">
            <el-tooltip
              class="item"
              effect="light"
              content="博物馆营销"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter3"
                  class="side side3"
                  @mouseover="changeIndex3"
                  @mouseout="changeIndexBack3"
                >
                <img
                  src="./bwg_img/pic10.png"
                  class="side side3_1"
                  v-show="side3_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g4"
          id="g_4"
        >
          <a href="#a4">
            <el-tooltip
              class="item"
              effect="light"
              content="文物监测预警系统"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter4"
                  class="side side4"
                  @mouseover="changeIndex4"
                  @mouseout="changeIndexBack4"
                >
                <img
                  src="./bwg_img/pic12.png"
                  class="side side4_1"
                  v-show="side4_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g5"
          id="g_5"
        >
          <a href="#a5">
            <el-tooltip
              class="item"
              effect="light"
              content="智能监控"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter5"
                  class="side side5"
                  @mouseover="changeIndex5"
                  @mouseout="changeIndexBack5"
                >
                <img
                  src="./bwg_img/pic23.png"
                  class="side side5_1"
                  v-show="side5_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g6"
          id="g_6"
        >
          <a href="#a6">
            <el-tooltip
              class="item"
              effect="light"
              content="电子巡更"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter6"
                  class="side side6"
                  @mouseover="changeIndex6"
                  @mouseout="changeIndexBack6"
                >
                <img
                  src="./bwg_img/pic24.png"
                  class="side side6_1"
                  v-show="side6_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g7"
          id="g_7"
        >
          <a href="#a7">
            <el-tooltip
              class="item"
              effect="light"
              content="智能分析应用"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter7"
                  class="side side7"
                  @mouseover="changeIndex7"
                  @mouseout="changeIndexBack7"
                >
                <img
                  src="./bwg_img/pic8.png"
                  class="side side7_1"
                  v-show="side7_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g9"
          id="g_9"
        >
          <a href="#a9">
            <el-tooltip
              class="item"
              effect="light"
              content="数字资源"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter8"
                  class="side side9"
                  @mouseover="changeIndex8"
                  @mouseout="changeIndexBack8"
                >
                <img
                  src="./bwg_img/pic9.png"
                  class="side side9_1"
                  v-show="side9_1"
                >
              </div>
            </el-tooltip>
          </a>
        </li>
        <li
          class="g8"
          id="g_8"
        >
          <a href="#a8">
            <el-tooltip
              class="item"
              effect="light"
              content="回到顶部"
              placement="left"
            >
              <div class="W2_2">
                <img
                  :src="indexCenter9"
                  class="side"
                  @mouseover="changeIndex9"
                  @mouseout="changeIndexBack9"
                >
              </div>
            </el-tooltip>
          </a>
        </li>

      </ul>
    </div>

    <div
      id="a8"
      class="a_8"
    >

      <div class="start">
        <img
          :src="img"
          class="start_img"
        >
      </div>
      <div class="bannert">
        <div class="headers">{{title}}</div>
        <div class="header2">{{subtitle}}</div>
      </div>
    </div>
    <!-- 轮播图 -->
    <!-- <div
      v-if="imgarr.length>0"
      class="imgarr"
    >
      <el-carousel
        :autoplay='false'
        :interval="4000"
        type="card"
        height="250px"
      >
        <el-carousel-item
          v-for="(item,index) in imgarr"
          :key="index"
        >
          <img
            :src="item.bannerImg"
            alt=""
          >
        </el-carousel-item>
      </el-carousel>
      <div></div>
    </div> -->
    <imgss :imgarr='imgarr'></imgss>
    <div
      id="a1"
      class="a_1"
    >
      <div v-html="uediteor1">
        {{uediteor1}}
      </div>

    </div>
    <div
      id="a2"
      class="a_2"
    >
      <div v-html="uediteor2">
        {{uediteor2}}
      </div>
    </div>
    <div
      id="a3"
      class="a_3"
    >
      <div v-html="uediteor3">
        {{uediteor3}}
      </div>
    </div>
    <div
      id="a4"
      class="a_4"
    >
      <div v-html="uediteor4">
        {{uediteor4}}
      </div>
    </div>
    <div
      id="a5"
      class="a_5"
    >
      <div v-html="uediteor5">
        {{uediteor5}}
      </div>
    </div>

    <div
      id="a6"
      class="a_6"
    >
      <div v-html="uediteor6">
        {{uediteor6}}
      </div>

    </div>
    <div
      id="a7"
      class="a_7"
    >
      <div v-html="uediteor7">
        {{uediteor7}}
      </div>
    </div>

    <div
      id="a9"
      class="a_9"
    >

      <div v-html="uediteor8">
        {{uediteor8}}
      </div>
    </div>

    <!--table页面  -->
    <!-- <div
      v-if="tablearr.length>0"
      class="tables"
    >
      <div class="text">
        <div
          :class="item.sort==clicktableimg?'border':''"
          @click="clicktable(item.sort)"
          v-for="(item,index) in tablearr"
          :key="index"
        >{{item.tabName}}</div>
      </div>
      <div class="imgs">
        <div
          v-show="item.sort==clicktableimg"
          v-for="(item,index) in tablearr"
          :key="index"
        >
          <img :src="item.tabImg">
        </div>
      </div>
    </div> -->
    <tabless :tablearr='tablearr'></tabless>
    <!-- 高度 -->
    <div style="
    background-color:#1b1c20 ;
    height:10px;
    margin-top:10px">
    </div>
    <Footer></Footer>
  </div>

</template>

<script>
//引入头部组件
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
// table
import tabless from "@/views/srdemo/component/table.vue";
//img
import imgss from "@/views/srdemo/component/img.vue";

import { inquireId } from "@/api/contact.js"
import { getlag, getpages, getimgs, gettables } from '@/api/srapi/srapi.js'
import axios from "axios";
export default {
  data() {
    return {
      indexCenter1: require("./bwg_img/pic13.png"),
      indexCenter11: require("./bwg_img/pic21.png"),
      indexCenter111: require("./bwg_img/pic13.png"),
      indexCenter2: require("./bwg_img/pic5.png"),
      indexCenter22: require("./bwg_img/pic22.png"),
      indexCenter222: require("./bwg_img/pic5.png"),
      indexCenter3: require("./bwg_img/pic6.png"),
      indexCenter33: require("./bwg_img/pic20.png"),
      indexCenter333: require("./bwg_img/pic6.png"),
      indexCenter4: require("./bwg_img/pic4.png"),
      indexCenter44: require("./bwg_img/pic18.png"),
      indexCenter444: require("./bwg_img/pic4.png"),
      indexCenter5: require("./bwg_img/pic28.png"),
      indexCenter55: require("./bwg_img/pic14.png"),
      indexCenter555: require("./bwg_img/pic28.png"),
      indexCenter6: require("./bwg_img/pic1.png"),
      indexCenter66: require("./bwg_img/pic15.png"),
      indexCenter666: require("./bwg_img/pic1.png"),
      indexCenter7: require("./bwg_img/pic3.png"),
      indexCenter77: require("./bwg_img/pic17.png"),
      indexCenter777: require("./bwg_img/pic3.png"),
      indexCenter8: require("./bwg_img/pic2.png"),
      indexCenter88: require("./bwg_img/pic19.png"),
      indexCenter888: require("./bwg_img/pic2.png"),
      indexCenter9: require("./bwg_img/ICON.png"),
      indexCenter99: require("./bwg_img/img_6.png"),
      indexCenter999: require("./bwg_img/ICON.png"),
      // loading: true
      // 动态需要的
      title: "",
      subtitle: "",
      img: '',
      uediteor: "",
      uediteor1: "",
      uediteor2: "",
      uediteor3: "",
      uediteor4: "",
      uediteor5: "",
      uediteor6: "",
      uediteor7: "",
      uediteor8: "",
      //轮播图得数据
      imgarr: [],
      //table得数据
      tablearr: [],
      //table得数据
      tablearr: [],
      //当前激活得table
      clicktableimg: 1,
      side1_1: false,
      side2_1: false,
      side3_1: false,
      side4_1: false,
      side5_1: false,
      side6_1: false,
      side7_1: false,
      side9_1: false,

    }
  },
  mounted() {
    window.addEventListener("scroll", this.sidebar2)


  }

  , components: {
    Header,
    Footer,
    tabless,
    imgss
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.sidebar2)
  },
  created() {
    this.detailPage()
    setTimeout(() => {
      this.detailPage1()
    }, 2001);
    setTimeout(() => {
      this.detailPage2()
    }, 4002);
    setTimeout(() => {
      this.detailPage3()
    }, 6003);
    setTimeout(() => {
      this.detailPage4()
    }, 8004);
    setTimeout(() => {
      this.detailPage5()
    }, 10005);
    setTimeout(() => {
      this.detailPage6()
    }, 12006);
    setTimeout(() => {
      this.detailPage7()
    }, 14007);
    setTimeout(() => {
      this.detailPage8()
    }, 16008);
    //获取轮播图片
    this.getimgss()
    //获取table图片
    this.gettabless()

  },
  methods: {

    sidebar2() {

      let scrollTop = 0;
      let distance1 = document.querySelector(".a_1")
      let distanceTop1 = distance1.offsetTop - 10
      let distance2 = document.querySelector(".a_2")
      let distanceTop2 = distance2.offsetTop - 10
      let distance3 = document.querySelector(".a_3")
      let distanceTop3 = distance3.offsetTop - 10
      let distance4 = document.querySelector(".a_4")
      let distanceTop4 = distance4.offsetTop - 10
      let distance5 = document.querySelector(".a_5")
      let distanceTop5 = distance5.offsetTop - 10
      let distance6 = document.querySelector(".a_6")
      let distanceTop6 = distance6.offsetTop - 10
      let distance7 = document.querySelector(".a_7")
      let distanceTop7 = distance7.offsetTop - 10
      let distance9 = document.querySelector(".a_9")
      let distanceTop9 = distance9.offsetTop - 20

      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }

      if (scrollTop < 1000) {
        document.querySelector(".header").style.backgroundColor = "";
      } else {
        document.querySelector(".header").style.backgroundColor = "black";
      }

      if (scrollTop < distanceTop1) {
        this.side1_1 = false
        this.side2_1 = false
        this.side3_1 = false
        this.side4_1 = false
        this.side5_1 = false
        this.side6_1 = false
        this.side7_1 = false
        this.side9_1 = false

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "block"


      } else if (scrollTop >= distanceTop1 && scrollTop <= distanceTop2) {
        this.side1_1 = true
        this.side2_1 = false
        this.side3_1 = false
        this.side4_1 = false
        this.side5_1 = false
        this.side6_1 = false
        this.side7_1 = false
        this.side9_1 = false


        document.querySelector(".g1").style.backgroundColor = "#007AFF";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "none"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "block"

      }
      else if (scrollTop >= distanceTop2 && scrollTop <= distanceTop3) {
        this.side1_1 = false
        this.side2_1 = true
        this.side3_1 = false
        this.side4_1 = false
        this.side5_1 = false
        this.side6_1 = false
        this.side7_1 = false
        this.side9_1 = false

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "#007AFF";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "none"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "block"

      } else if (scrollTop >= distanceTop3 && scrollTop <= distanceTop4) {
        this.side1_1 = false
        this.side2_1 = false
        this.side3_1 = true
        this.side4_1 = false
        this.side5_1 = false
        this.side6_1 = false
        this.side7_1 = false
        this.side9_1 = false

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "#007AFF";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "none"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "block"
      } else if (scrollTop >= distanceTop4 && scrollTop <= distanceTop5) {
        this.side1_1 = false
        this.side2_1 = false
        this.side3_1 = false
        this.side4_1 = true
        this.side5_1 = false
        this.side6_1 = false
        this.side7_1 = false
        this.side9_1 = false

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "#007AFF";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "none"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "block"
      }
      else if (scrollTop >= distanceTop5 && scrollTop <= distanceTop6) {
        this.side1_1 = false
        this.side2_1 = false
        this.side3_1 = false
        this.side4_1 = false
        this.side5_1 = true
        this.side6_1 = false
        this.side7_1 = false
        this.side9_1 = false

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "#007AFF";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "none"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "block"
      }
      else if (scrollTop >= distanceTop5 && scrollTop <= distanceTop7) {
        this.side1_1 = false
        this.side2_1 = false
        this.side3_1 = false
        this.side4_1 = false
        this.side5_1 = false
        this.side6_1 = true
        this.side7_1 = false
        this.side9_1 = false

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "#007AFF";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "none"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "block"
      }
      else if (scrollTop >= distanceTop7 && scrollTop <= distanceTop9) {
        this.side1_1 = false
        this.side2_1 = false
        this.side3_1 = false
        this.side4_1 = false
        this.side5_1 = false
        this.side6_1 = false
        this.side7_1 = true
        this.side9_1 = false

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "#007AFF";
        document.querySelector(".g9").style.backgroundColor = "";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "none"
        document.querySelector(".side9").style.display = "block"
      } else if (scrollTop >= distanceTop9) {
        this.side1_1 = false
        this.side2_1 = false
        this.side3_1 = false
        this.side4_1 = false
        this.side5_1 = false
        this.side6_1 = false
        this.side7_1 = false
        this.side9_1 = true

        document.querySelector(".g1").style.backgroundColor = "";
        document.querySelector(".g2").style.backgroundColor = "";
        document.querySelector(".g3").style.backgroundColor = "";
        document.querySelector(".g4").style.backgroundColor = "";
        document.querySelector(".g5").style.backgroundColor = "";
        document.querySelector(".g6").style.backgroundColor = "";
        document.querySelector(".g7").style.backgroundColor = "";
        document.querySelector(".g9").style.backgroundColor = "#007AFF";

        document.querySelector(".side1").style.display = "block"
        document.querySelector(".side2").style.display = "block"
        document.querySelector(".side3").style.display = "block"
        document.querySelector(".side4").style.display = "block"
        document.querySelector(".side5").style.display = "block"
        document.querySelector(".side6").style.display = "block"
        document.querySelector(".side7").style.display = "block"
        document.querySelector(".side9").style.display = "none"
      }
    },
    changeIndex1() {
      this.indexCenter1 = this.indexCenter11
    },
    changeIndexBack1() {
      this.indexCenter1 = this.indexCenter111
    },
    changeIndex2() {
      this.indexCenter2 = this.indexCenter22
    },
    changeIndex3() {
      this.indexCenter3 = this.indexCenter33
    },
    changeIndex4() {
      this.indexCenter4 = this.indexCenter44
    },
    changeIndex5() {
      this.indexCenter5 = this.indexCenter55
    },
    changeIndex6() {
      this.indexCenter6 = this.indexCenter66
    },
    changeIndex7() {
      this.indexCenter7 = this.indexCenter77
    },
    changeIndex8() {
      this.indexCenter8 = this.indexCenter88
    },
    changeIndex9() {
      this.indexCenter9 = this.indexCenter99
    },
    changeIndexBack2() {
      this.indexCenter2 = this.indexCenter222
    },
    changeIndexBack3() {
      this.indexCenter3 = this.indexCenter333
    },
    changeIndexBack4() {
      this.indexCenter4 = this.indexCenter444
    },
    changeIndexBack5() {
      this.indexCenter5 = this.indexCenter555
    },
    changeIndexBack6() {
      this.indexCenter6 = this.indexCenter666
    },
    changeIndexBack7() {
      this.indexCenter7 = this.indexCenter777
    },
    changeIndexBack8() {
      this.indexCenter8 = this.indexCenter888
    },
    changeIndexBack9() {
      this.indexCenter9 = this.indexCenter999
    },
    //获取轮播图
    async getimgss() {
      const res = await getimgs("ebb60571-b43a-4db8-945b-00fb6950ad5f")
      // console.log("imgs");
      res.data.data.banners.map((item) => {
        if (item.bannerImg) {
          this.imgarr.push(item)
        }
      })
      // console.log(this.imgarr);
    },
    //获取table图片
    async gettabless() {
      const res = await gettables("ebb60571-b43a-4db8-945b-00fb6950ad5f")
      // console.log('table图');
      // console.log(res.data.data.tabs);
      res.data.data.tabs.map((item) => {
        if (item.tabImg) {
          this.tablearr.push(item)
        }
      })
    },
    //点击切换轮播图
    clicktable(sort) {
      this.clicktableimg = sort
    },


    // 获取详情页的内容
    detailPage() {
      inquireId({ menuId: "ebb60571-b43a-4db8-945b-00fb6950ad5f" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            this.title = res.data.data.title
            this.subtitle = res.data.data.subtitle
            this.img = res.data.data.bgImg
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    // 游客服务
    detailPage1() {
      inquireId({ menuId: "6eea1b1f-c1eb-42e1-b614-bbcd84279a27" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd).then(res => {

              // console.log(res);
              this.uediteor1 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    // 馆藏业务
    detailPage2() {
      inquireId({ menuId: "91c7f87c-ceee-4cb3-a497-a89f7d19e4a0" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd2 = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd2).then(res => {

              // console.log(res);
              this.uediteor2 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    // 博物馆营销
    detailPage3() {
      inquireId({ menuId: "99c7198a-5e93-42ec-a1eb-8ccfe22c337a" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd3 = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd3).then(res => {

              // console.log(res);
              this.uediteor3 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    // 文物检测预警系统
    detailPage4() {
      inquireId({ menuId: "e7a2ebff-7088-4f30-a031-ff72d4c5e8ed" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd4 = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd4).then(res => {

              // console.log(res);
              this.uediteor4 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    // 智能监控 
    detailPage5() {
      inquireId({ menuId: "3f8d6f75-125d-449d-b536-f6de602ae505" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd5 = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd5).then(res => {

              // console.log(res);
              this.uediteor5 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    // 电子巡更
    detailPage6() {
      inquireId({ menuId: "1b3ef709-3e66-42a9-b66c-a1bc60c77ad6" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd6 = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd6).then(res => {

              // console.log(res);
              this.uediteor6 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    // 智能分析应用
    detailPage7() {
      inquireId({ menuId: "be600193-c71f-4343-ad8f-751bfe4374d0" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd7 = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd7).then(res => {

              // console.log(res);
              this.uediteor7 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
    //  数字资源
    detailPage8() {
      inquireId({ menuId: "2c7f5298-44b7-4cfa-a9a1-54fbb834474b" }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          if (res.data.msg == "success") {
            let fd8 = res.data.data.pcUrl
            // 请求富文本框的值
            axios.get(fd8).then(res => {

              // console.log(res);
              this.uediteor8 = res.data.content
              // console.log(this.msg);
            })
          } else {
            this.$message.error("页面获取失败")
          }
        }
      })
    },
  }





}



</script>
<style>
.el-tooltip__popper {
  font-size: 20px !important;
}
</style>
<style lang="scss" scoped>
a {
  text-decoration: none;
}
ul {
  z-index: 999;
}
li {
  /* height: 20px;
  width: 80px; */
  list-style: none;
}
li:active {
  background-color: #fff;
}
/* 动画效果 */
@keyframes sport {
  0% {
    transform: translateY(80px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
// 侧边栏导航
.W2_2 {
}
.a_1 {
  padding-top: 80.0064px;
}
.info11 {
  width: 165.0048px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 39.9936px;
  letter-spacing: 0.0065rem;
  line-height: 56.0064px;
  text-align: justify;
  align-self: center;
  margin-top: 80.0064px;
  margin: 0 auto;
  /* left: 4.5677rem; */
}
.layer4 {
  z-index: auto;
  width: 1200px;
  height: 534.0096px;
}
.word7 {
  color: rgba(86, 86, 86, 1);
  font-size: 20.0064px;
  line-height: 39.9936px;
  margin: auto;
  margin-top: 24px;
}
.txt2 {
  color: rgba(51, 51, 51, 1);
  font-size: 18.0096px;
  line-height: 24.9984px;
  display: block;
  overflow-wrap: break-word;
  text-align: justify;
  align-self: center;
  font-weight: 700;
  margin-top: 24px;
  margin-left: 18px;
}
.info1 {
  color: rgba(51, 51, 51, 1);
  font-size: 18.0096px;
  line-height: 24.9984px;
  display: block;
  overflow-wrap: break-word;
  text-align: justify;
  align-self: center;
  font-weight: 700;
  margin-top: 24px;
  margin-left: 18px;
}
.ml {
  margin-left: 30px;
}
.img_2_2 {
  width: 380px;
  height: 260px;
}

.word8 {
  width: 345px;
  height: 40px;
  color: rgba(153, 153, 153, 1);
  font-size: 14px;
  line-height: 20.0064px;
  margin-top: 15.9936px;
  display: block;
  overflow-wrap: break-word;
  text-align: justify;
  align-self: center;
  margin-left: 18px;
}
.img_1 {
  z-index: auto;
  width: 380px;
  height: 433.9968px;
  box-shadow: 1.9968px 3.9936px 12px 1.9968px rgba(0, 0, 0, 0.04);
}
.load-img {
  height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  img[lazy="loading"] {
    width: 50px;
    height: 50px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    width: 380px;
    height: 260px;
  }
}
.main {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.txt3 {
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 122, 255, 1);
  font-size: 15.9936px;
  letter-spacing: 0.4992px;
  line-height: 22.0032px;
  text-align: left;
  align-self: flex-start;
  margin-top: 24px;
  margin-left: 18px;
  cursor: pointer;
}
.img_2 {
  width: 380.0064px;
  height: 433.9968px;
  box-shadow: 1.9968px 3.9936px 12px 1.9968px rgba(0, 0, 0, 0.04);
}
.img_3 {
  width: 380.0064px;
  height: 433.9968px;
  box-shadow: 1.9968px 3.9936px 12px 1.9968px rgba(0, 0, 0, 0.04);
}
.word11 {
  display: block;
  overflow-wrap: break-word;
  color: rgba(204, 204, 204, 1);
  font-size: 15.9936px;
  letter-spacing: 0.4992px;
  line-height: 22.0032px;
  text-align: left;
  align-self: flex-start;
  margin-top: 24px;
  margin-left: 18px;
}
.a_2 {
  height: 720px;
  //  background-repeat: no-repeat;
  // background-size: 100% 100%;
  margin: auto;
  margin-top: 100px;
  position: relative;
}
.img-3 {
  height: 720px;
}
.img-2 {
  height: 720px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 720px;
    width: 100%;
  }
}
.lintere2 {
  position: absolute;
  margin: auto;
  top: 252px;
  left: 398px;
}
.lintere3 {
  position: absolute;
  top: 252px;
  left: 624px;
}
.lintere4 {
  position: absolute;
  margin: auto;
  top: 252px;
  left: 410px;
}
.lintere8 {
  position: absolute;
  margin: auto;
  top: 252px;
  left: 455px;
}
.info12 {
  width: 165.0048px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 39.9936px;
  letter-spacing: 1.248px;
  line-height: 56.0064px;
  text-align: justify;
  align-self: center;
  // padding-top: 80.0064px;
  margin: 0 auto;
  // padding-top: 252px;
}
.info4 {
  width: 330.0096px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 39.9936px;
  letter-spacing: 1.248px;
  line-height: 56.0064px;
  text-align: justify;
  align-self: center;
  margin-top: 80.0064px;
  margin: 0 auto;
  // padding-top: 252px;
}
.word4 {
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20.0064px;
  line-height: 39.9936px;
}
.word20 {
  display: block;
  overflow-wrap: break-word;
  color: #007aff;
  font-size: 20.0064px;
  line-height: 39.9936px;
}
.txt4 {
  width: 155.0016px;
  height: 48px;
  border-radius: 24px;
  border: 0.9984px solid rgba(204, 204, 204, 1);
  margin: auto;
  margin-top: 36px;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.txt20 {
  width: 155.0016px;
  height: 48px;
  border-radius: 24px;
  border: 0.9984px solid #007aff;
  margin: auto;
  margin-top: 36px;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.word19 {
  color: rgba(255, 255, 255, 1);
  font-size: 20.0064px;
  letter-spacing: 0.9984px;
  line-height: 39.9936px;
  margin: auto;
  margin-top: 24px;
}
.section10 {
  width: 1113.0048px;
  height: 56.0064px;
  margin: auto;
  margin-top: 20.0064px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label1 {
  width: 56.0064px;
  margin-top: 9.0048px;
}
.txt10 {
  color: rgba(255, 255, 255, 1);
  font-size: 20.0064px;
  margin-left: 13.9968px;
}
.pic2 {
  width: 56.0064px;
  margin-top: 9.0048px;
  margin-left: 75.9936px;
}
.info13 {
  color: rgba(51, 51, 51, 1);
  font-size: 39.9936px;
  letter-spacing: 1.248px;
  padding-top: 80.0064px;
}
.a_min_3 {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.a_min_3_3 {
  width: 585.0048px;
  height: 420px;
}
.load-2 {
  width: 585.0048px;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  img[lazy="loading"] {
    width: 70px;
    height: 70px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    width: 585.0048px;
    height: 420px;
  }
}
.a_min_3_4 {
  width: 585.0048px;
  height: 420px;
  margin-left: 30.0096px;
}
.a_4 {
  height: 720px;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  margin: auto;
  margin-top: 99.9936px;
  position: relative;
}
.info14 {
  width: 165.0048px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 39.9936px;
  line-height: 56.0064px;
  padding-top: 80.0064px;
  text-align: justify;
  align-self: center;
  margin: 0 auto;
}
.word10 {
  color: rgba(86, 86, 86, 1);
  font-size: 20.0064px;
  line-height: 39.9936px;
  margin: 0 auto;
  margin-top: 24px;
  margin-left: -10.0032px;
}
.main_2 {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.txt_5 {
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 18.0096px;
  line-height: 24.9984px;
  margin: auto;
  margin-top: 24px;
}
.txt_5_5 {
  width: 229.9968px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 13.9968px;
  letter-spacing: 0.5833333134651184px;
  line-height: 20.0064px;
  margin: auto;
  margin-top: 15.9936px;
}
.img_5 {
  height: 376.992px;
  border-radius: 6.0096px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.9968px 3.9936px 12px 1.9968px rgba(0, 0, 0, 0.04);
  width: 277.9968px;
}
.img_5_1 {
  height: 376.992px;
  border-radius: 6.0096px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.9968px 3.9936px 12px 1.9968px rgba(0, 0, 0, 0.04);
  width: 277.9968px;
  margin-left: 30.0096px;
}
.a_6 {
  height: 720px;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  margin: auto;
  margin-top: 99.9936px;
  position: relative;
}
.main_3 {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
}
.img_6 {
  height: 291.9936px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.9968px 3.9936px 12px 1.9968px rgba(0, 0, 0, 0.04);
  width: 277.9968px;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.img_6_3 {
  height: 291.9936px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1.9968px 3.9936px 12px 1.9968px rgba(0, 0, 0, 0.04);
  width: 277.9968px;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin-left: 30.0096px;
}
.img_6_2 {
  width: 92.0064px;
  height: 92.0064px;
  margin-top: 40px;
}

.txt_6 {
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 20.0064px;
  letter-spacing: 0.8256px;
  line-height: 27.9936px;
  margin: auto;
  margin-top: 2.9952px;
  font-weight: 700;
}
.txt_6_1 {
  width: 205.9968px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 13.9968px;
  line-height: 20.0064px;
  margin: auto;
  margin-top: 15.9936px;
}
.a_9 {
  margin-top: 99.9936px;
  height: 720px;
  // background-repeat:  no-repeat;
  // background-size: 100% 100%;
  margin: auto;
  bottom: -10px;
  margin-top: 99.9936px;
  position: relative;
}
.txt9 {
  color: rgba(255, 255, 255, 1);
  font-size: 20.0064px;
  letter-spacing: 0.8256px;
  margin-left: 24px;
}
.pic3 {
  width: 56.0064px;
  margin-top: 9.0048px;
  margin-left: 164.0064px;
}
.section11 {
  width: 1113.0048px;
  height: 56.0064px;
  margin: auto;
  margin-top: 44.0064px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pic6 {
  width: 278px;
  height: 208px;
}
.img-5 {
  width: 278px;
  height: 208px;
  display: flex;
  justify-content: center;
  align-items: center;
  img[lazy="loading"] {
    width: 50px;
    height: 50px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    width: 278px;
    height: 208px;
  }
}
.headers {
  color: rgba(255, 255, 255, 1);
  font-size: 48px;
  // letter-spacing: 3.4285714626312256px;
  line-height: 67px;
  text-align: justify;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  // padding-left: 360px;
  // padding-top: 230px;
}
.headers {
  animation: sport 0.5s;
  transform: translateY(0px);
}
.header2 {
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
  line-height: 33px;
  text-align: justify;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  align-self: center;
  margin-top: 20px;
  width: 700px;
  // padding-left: 360px;
}
.header2 {
  animation: sport 0.5s;
  transform: translateY(0px);
}
.a_8 {
  height: 600px;
  width: 100%;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
}
.start_img {
  height: 600px;
  width: 100%;
}
.start {
  height: 600px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 600px;
    width: 100%;
  }
}
.bannert {
  position: absolute;
  left: 361px;
  top: 230px;
}
ul {
  position: fixed;
  right: 0;
  top: 95px;
}
li {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.side {
  height: 32px;
  height: 32px;
}
//image轮播图
.imgarr {
  width: 1200px;
  margin-left: 360px;
  padding-top: 40px;
  .el-carousel__item img {
    width: 100%;
    height: 100%;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
// table 栏切换
.tables {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 1200px;
  margin-left: 360px;
  .text {
    height: 66px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 66px;
    border-bottom: 1px solid gray;
    div {
      width: 100%;
    }
    div:hover {
      cursor: pointer;
      background-color: rgb(197, 198, 201);
    }
    .border {
      border-bottom: 3px solid blue;
      margin-bottom: -1px;
    }
  }
  .imgs {
    padding-top: 15px;
    div {
      height: 420px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>